import React, { Component } from 'react'
import "../assets/css/reg.css"
import Header from "../components/HeadAssembly"
export default class Reg extends Component {
    state = {
        phone: '',
        nickname: '',
        password: ''
    }
    reg() {
        const { phone, nickname, password } = this.state
        if (phone === "") {
            return alert('手机号不能为空')
        }
        if (nickname === "") {
            return alert('昵称不能为空')
        }
        if (password === "") {
            return alert('密码不能为空')
        }
        this.$axios.post('/register', { phone, nickname, password }).then(res => {
            this.setState({
                phone: '',
                nickname: '',
                password: ''
            })
            alert('注册成功')
            this.props.history.push('/login')
        })
    }
    render() {
        const { phone, nickname, password } = this.state
        return (
            <>
                <Header title="会员注册" right_text="登录" right_method={() => this.props.history.push("/login")} />
                <div className="reg-container">

                    <div className="logo"></div>
                    <div className="form">

                        <div className="form-group">
                            <input value={phone} onChange={(e) => this.setState({ phone: e.target.value })} type="text" placeholder="手机号" />
                        </div>
                        <div className="form-group">
                            <input value={nickname} onChange={(e) => this.setState({ nickname: e.target.value })} type="text" placeholder="昵称" />
                        </div>
                        <div className="form-group">
                            <input value={password} onChange={(e) => this.setState({ password: e.target.value })} type="password" placeholder="密码" />
                        </div>
                        <div className="form-group">
                            <button className="btn-gray" onClick={() => this.reg()}>注册</button>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
